import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Row, Col, Card, Form, Input, Select, Button, DatePicker } from 'antd';
const { RangePicker } = DatePicker;
import FollowerTable from '../../components/Follower/FollowerTable';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';

import styles from './FollowerList.less';
import docCookies from "../../common/DocCookies";


const FormItem = Form.Item;
const { Option } = Select;
const getValue = obj => Object.keys(obj).map(key => obj[key]).join(',');

@connect(state => ({
  follower: state.follower,
}))
@Form.create()
export default class FollowerList extends PureComponent {
  state = {
    globalRsId:docCookies.getItem("rsId"),
    pageNo:1,
    pageSize:10,
    addInputValue: '',
    modalVisible: false,
    expandForm: false,
    selectedRows: [],
    formValues: {},
    nickName:"",
    followerData:[],
  };

  componentDidMount() {
    const pageNo = this.state.pageNo;
    const pageSize = this.state.pageSize;
    const nickName = this.state.nickName;
    this.handleInitSearch(pageNo,pageSize,nickName);
  }
  //把初始化查询的代码抽离出来
  handleInitSearch = (pageNo,pageSize,nickName) => {
    const { dispatch } = this.props;
    const params = {
     rsId:this.state.globalRsId,
      pageNo: pageNo,
      pageSize: pageSize,
      nickName:nickName
    };
    dispatch({
      type: 'follower/listFollower',
      payload:params,
      callback:(data) =>{
        this.setState({
          followerData:data,
        })
      }
    });
  }

  //实现分页查询粉丝
  handleFollowerTableChange = (pagination, filtersArg, sorter) => {
    const { nickName } = this.state;
    const pageNo = pagination.current;
    const pageSize = pagination.pageSize;
    this.state.pageNo = pageNo;
    this.handleInitSearch(pageNo,pageSize,nickName);
  }

  //重置查询粉丝
  handleFormReset = () => {
    const { form } = this.props;
    form.resetFields();
    this.setState({
      pageNo:1
    },() => {
      const pageNo = this.state.pageNo;
      const pageSize = this.state.pageSize;
      this.handleInitSearch(pageNo,pageSize,"");
    });
  }

  handleSelectRows = (rows) => {
    this.setState({
      selectedRows: rows,
    });
  }
  //删除单个粉丝处理方式
  delFollower = (record,index) => {
    const { dispatch } = this.props;
    const {pageNo,pageSize,nickName } = this.state;
    const params = {
      ids:record.id,
    };
    dispatch({
      type: 'follower/delFollowers',
      payload:params,
      callback:(data) =>{
        if(data.errorCode == 1){
          this.handleInitSearch(pageNo,pageSize,nickName);
        }
      }
    });
  }
  //批量删除粉丝处理
  delFollowers = (ids) => {
    const { dispatch } = this.props;
    const {pageNo,pageSize,nickName } = this.state;
    const params = {
      ids:ids,
    };
    dispatch({
      type: 'follower/delFollowers',
      payload:params,
      callback:(data) =>{
        if(data.errorCode == 1){
          this.handleInitSearch(pageNo,pageSize,nickName);
        }
      }
    });


  }
  handleSearch = (e) => {
    const self = this;
    const pageNo = self.state.pageNo;
    const pageSize = self.state.pageSize;

    e.preventDefault();
    const { form } = this.props;
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      var nickName = fieldsValue.nickName && fieldsValue.nickName.valueOf();
      if(nickName == undefined){
        nickName = "";
      }
      self.setState({
        nickName:nickName,
        pageNo:1,
      },() => {
        this.handleInitSearch(pageNo,pageSize,nickName);
      });
    });
  }

  renderForm() {
    const { getFieldDecorator } = this.props.form;
    return (
      <Form onSubmit={this.handleSearch} layout="inline">
        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
          <Col md={8} sm={24}>
            <FormItem label="昵称">
              {getFieldDecorator('nickName')(
                <Input placeholder="输入昵称" />
              )}
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <span className={styles.submitButtons}>
              <Button type="primary" htmlType="submit">查询</Button>
              <Button style={{ marginLeft: 8 }} onClick={this.handleFormReset}>重置</Button>
            </span>
          </Col>
        </Row>
      </Form>
    );
  }

  render() {
    const { follower: { loading: loading, followerData } } = this.props;
    const { selectedRows} = this.state;
    return (
      <PageHeaderLayout>
        <Card bordered={false}>
          <div className={styles.tableList}>
            <div className={styles.tableListForm}>
              {this.renderForm()}
            </div>
            <FollowerTable
              selectedRows={selectedRows}
              loading={loading}
              followerData={this.state.followerData}
              onSelectRow={this.handleSelectRows}
              onChange={this.handleFollowerTableChange}
              delFollower={(record,index)=>this.delFollower(record,index)}
              delFollowers={(ids)=>this.delFollowers(ids)}
            />
          </div>
        </Card>
      </PageHeaderLayout>
    );
  }
}
